<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="item-list">
    <draggable :list="form.choices" handle=".move" animation="150" v-if="form.choices && form.choices.length > 0">
      <div class="item" v-for="(item, index) in form.choices" :key="index">
        <i
          class="MC_iconfont CodeMirror-overlayscroll-horizontal move el-icon-rank"
          style="float: left; cursor: move"
        ></i>
        <el-input
          class="content"
          v-model.trim="item.value"
          placeholder="请输入复选框内容"
          maxlength="50"
          show-word-limit
          :disabled="disabled"
          @input="inputValue(item)"
          @change="itemChange($event, index)"
        ></el-input>
        <div class="operate">
          <el-checkbox v-model="item.isDefault" @change="onItemChange" :disabled="disabled">默认</el-checkbox>
          <i v-if="!disabled" class="MC_iconfont el-icon-delete" @click="remove(index)"></i>
        </div>
      </div>
    </draggable>
    <div v-show="!disabled" @click="add" class="add-btn"><i class="MC_iconfont el-icon-plus" />添加选项</div>
  </div>
</template>
<script>
import * as uuid from 'uuid'
import draggable from 'vuedraggable'
export default {
  name: 'selectComp',
  data() {
    return {}
  },
  components: {
    draggable
  },
  props: {
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  computed: {
    disabled() {
      return this.form.category === 'system' && this.form.field !== 'customerSource'
    }
  },
  methods: {
    onItemChange() {
      this.$emit('onItemChange', this.form.choices)
    },
    inputValue (row) {
      if (!row.value) {
        this.onItemChange()
      }
    },
    // 校验选项是否存在
    itemChange(val, idx) {
      if (!val) {
        this.onItemChange()
      }
      this.form.choices.forEach((item, i) => {
        if (idx !== i && item.value === val) {
          this.$message.error('选项已存在')
          let obj = this.form.choices[idx]
          obj.value = ''
          this.$set(this.form.choices, idx, obj)
        }
      })
    },
    remove(index) {
      // eslint-disable-next-line vue/no-mutating-props
      this.form.choices.splice(index, 1)
      this.onItemChange()
    },
    add() {
      // eslint-disable-next-line vue/no-mutating-props
      this.form.choices.push({
        value: '',
        isDefault: false,
        key: uuid.v1().replace(/-/g, '')
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import "../../../../../assets/common.styl"
.item-list
  background #fafafa
  padding 16px
  border-radius 4px
  overflow hidden
  .MC_iconfont
    color rgba(0, 0, 0, 0.38)
  .item
    line-height 32px
    margin-bottom 16px
    overflow hidden
    .content
      width calc(100% - 133px)
      float left
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      margin-left 16px
    .operate
      float right
      line-height 32px
      :deep(.el-checkbox__inner)
        border-color rgba(0, 0, 0, 0.38)
      :deep(.el-checkbox__input.is-checked .el-checkbox__inner)
        border-color $c-main
      i
        color rgba(0, 0, 0, 0.38)
        margin-left 16px
        font-size 16px
        cursor pointer
        &:hover
          color #fc6c5c
  .add-btn
    cursor pointer
    color $c-main
    margin-left 10px
    .el-icon-plus
      margin-right 6px
      color $c-main
.el-icon-rank
  color: rgba(0,0,0,0.38);
  padding-top: 9px;
  font-size: 20px;
</style>
